<template>
    <Viewport title="Browser" icon="/src/assets/icons/edge.png" :class="{'z-40': focus}" @muti="muti" @cancel="cancel" @mousedown="changeFocus">
        <header class="h-8 relative flex bg-gray-25" :class="{'filter invert grayscale': darkMode}">
            <section class="h-6.5 w-48 absolute -top-6.5 left-7 bg-gray-25 rounded-t-md shadow-rlg">
                <span class="text-xs ml-3">New Tab</span> <img class="inline-block ml-28" src="/src/assets/ui/cancel.png" width="7">
            </section>
                <section class="flex w-full items-center gap-1 pl-2">
                    <img class="hover:bg-black hover:bg-opacity-5 rounded-full p-1" src="/src/assets/ui/left.png" width="24" @click="back">
                    <img class="hover:bg-black hover:bg-opacity-5 rounded-full p-1" src="/src/assets/ui/right.png" width="24" @click="forward">
                    <img class="hover:bg-black hover:bg-opacity-5 rounded-full p-1" src="/src/assets/ui/shuaxin.png" width="24" @click="refresh">
                    <div class="pl-2">
                        <img class="hover:bg-black hover:bg-opacity-5 rounded-full p-1" src="/src/assets/ui/home.png" width="28" @click="home">
                    </div>
                <div class="pl-2 flex-1 cursor-text text-xss">
                    <input class="h-6 border-1 w-11/12 flex-1 focus:outline-none cursor-text rounded-md pl-4" :value="websites[current]" @keydown="handleKeydown" />
                </div>
                </section>
        </header>
        <iframe class="h-full w-full" :src="websites[current]" width="480" height="320"
        sandbox="allow-forms
             allow-scripts
              allow-same-origin
               allow-popups 
               allow-top-navigation">

        </iframe>
    </Viewport>
</template>

<script setup>
    import { computed, reactive, toRefs } from '@vue/reactivity';
    import Viewport from '../components/Viewport.vue';
    import { store } from '../store';

    const state = reactive({
        websites: ['https://www.bing.com'],
        current: 0
    })

    const darkMode = store.state.darkMode

    const handleKeydown = e => {
        if(e.keyCode === 13) {
            let str = e.target.value
            if(str.substr(0, 8) !== 'https://' && str.substr(0, 7) !== 'http://') {
                str = 'https://' + str
            }
            state.websites.push(str)
            e.target.value = state.websites[++state.current]
        }
    }
    const back = () => {
        if(state.current >= 1) {
            state.current --
        }
    }
    const forward = () => {
        if(state.current < state.websites.length - 1) {
            state.current ++
        }
    }
    const refresh = () => {
        document.querySelector('iframe').contentWindow.location.reload();
    }

    const focus = computed(() => store.state.focus === 'browser')
    const muti = () => {
        store.commit('CHANGE_BROWSER_SHOW', false)
        store.commit('CHANGE_FOCUS', '')
    } 
    const cancel = () => store.commit('CHANGE_BROWSER_ACTIVE', false)
    const changeFocus = () => {
        store.commit('CHANGE_FOCUS', 'browser')
        console.log(1111)
    } 

    const {websites, current} = toRefs(state)


</script>

<style scoped>
</style>


